<template>
    <div id="hot">
        <!-- 头部空行 -->
        <div style="height: 10px"></div>
        <!-- 头部信息 -->
        <p id="headFont">&nbsp;&nbsp;&nbsp;&nbsp;热门版面</p>
        <!-- 空行 -->
        <div style="height: 10px"></div>
        <!--  分割线 -->
        <hr style="size: 40px"/>
        <el-col :span="24"><div style="height: 10px"></div></el-col>
        <el-col :span="7" :offset="7">
            <el-link type="info" v-for="msg in msgList" @click="jumpPlate(msg.id)">{{msg.name}}</el-link><br/>
        </el-col>
    </div>
</template>

<script>
    export default {
        name: "hot",
        created: function f() {
            this.$axios
                .get('/api/plate/getHot')
                .then((req)=>{
                    const tmp = req.data.data;
                    this.msgList = tmp;
                })
        },
        data(){
            return{
                msgList:[{
                    id:'',
                    name:''
                }]
            }
        },
        methods:{
            jumpPlate:function(id){
                this.$router.push("/plate?id="+id);
            }
        }
    }
</script>

<style scoped>
    #hot{
        background-color: #f7f9fb;
        height: 200px;
        width: 100%;
        border-top: 4px #5cae97 solid ;
    }
    #headFont{
        size: 16px;
        text-align: left;
    }
    #content  .el-link--inner{
        text-align: left;
    }
</style>
